<template>
	<view class="page">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" activeStyle="color:#3c9cff" lineWidth="60" :scrollable="false" :current="current"
				@change="change"></u-tabs>
		</u-sticky>
		<view class="content" v-if="current == 0">
			<view class="ticket unused">
				<view class="left">
					￥20
				</view>
				<view class="right">
					<u--text text='“满100元优惠20元”优惠券'></u--text>
					<u-tag text="醇易佳加醇券" bgColor="#F21E46" shape="circle" borderColor="#F21E46"></u-tag>
					<u--text text="有效期：2043 年 08 月 02 日" color="#767676"></u--text>
				</view>
			</view>
		</view>
		<view class="content" v-if="current == 1">
			<view class="ticket used">
				<view class="left" style="color: #AAAAAA;">
					￥20
				</view>
				<view class="right">
					<u--text text='“满100元优惠20元”优惠券' color="#AAAAAA"></u--text>
					<u-tag text="醇易佳加醇券" bgColor="#AAAAAA" shape="circle" borderColor="#AAAAAA"></u-tag>
					<u--text text="有效期：2043 年 08 月 02 日" color="#AAAAAA"></u--text>
				</view>
				<view class="tag">
					<u--image :showLoading="true" src="/static/tickets/used.png" width="100rpx" height="100rpx"
						@click="click"></u--image>
				</view>
			</view>
		</view>
		<view class="content" v-if="current == 2">
			<view class="ticket lost">
				<view class="left" style="color: #AAAAAA;">
					￥20
				</view>
				<view class="right">
					<u--text text='“满100元优惠20元”优惠券' color="#AAAAAA"></u--text>
					<u-tag text="醇易佳加醇券" bgColor="#AAAAAA" shape="circle" borderColor="#AAAAAA"></u-tag>
					<u--text text="有效期：2043 年 08 月 02 日" color="#AAAAAA"></u--text>
				</view>
				<view class="tag">
					<u--image :showLoading="true" src="/static/tickets/lost.png" width="100rpx" height="100rpx"
						@click="click"></u--image>
				</view>
			</view>
		</view>



	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [{
				name: '未使用(1)',
			}, {
				name: '已使用(0)',
			}, {
				name: '已失效(0)'
			}
			],
			current: 0
		}
	},
	methods: {
		change(index) {
			console.log(index)
			this.current = index.index
		},
	}
}
</script>
<style lang="scss" scoped>
.content {
	padding: 30rpx 24rpx;

	.ticket {
		background-color: white;
		border-radius: 10px;
		padding-right: 20rpx;
		display: flex;
		position: relative;

		.left {
			width: 160rpx;
			font-size: 44rpx;
			color: #F21E46;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 200rpx;

			::v-deep .u-tag {
				width: fit-content;
			}
		}

		.tag {
			position: absolute;
			right: 40rpx;
			top: 50rpx;
		}
	}
}
</style>
